<template>
	<view class="order-manage">
		<!-- 顶部搜索及筛选区域 -->
		<view class="top-bar">
			<view class="search-box">
				<input class="search-input" placeholder="输入需要搜索的内容" v-model="searchKeyword" />
				<view class="search-icon" @click="search">🔍</view>
			</view>
			<view class="filter-bar">
				<view class="total-count">共{{ filteredList.length }}条</view>
				<view class="status-filter">
					<text>救援方式</text>
					<div class="relative">
						<!-- 关键：通过v-model双向绑定选中值 -->
						<select 
							class="select-box"
							v-model="selectedType"
						>
							<option value="">全部</option>
							<option value="1">搭电</option>
							<option value="2">换胎</option>
							<option value="3">拖车</option>
							<option value="4">空运</option>
						</select>
						<i class="fa fa-chevron-down select-arrow"></i>
					</div>
				</view>
				<view class="status-filter">
					<text>处理状态</text>
					<div class="relative">
						<!-- 关键：通过v-model双向绑定选中值 -->
						<select 
							class="select-box"
							v-model="selectedStatus"
						>
							<option value="">全部</option>
							<option value="1">已处理</option>
							<option value="0">未处理</option>
						</select>
						<i class="fa fa-chevron-down select-arrow"></i>
					</div>
				</view>
			</view>
		</view>

		<!-- 订单列表区域 -->
		<view class="order-list">
			<view class="order-item" v-for="(item, index) in filteredList" :key="item.id || index">
				<view class="order-header">
					<view class="order-id">救援号: {{ item.orderNo }}</view>
					<view class="order-price">救援位置:{{ item.position }}</view>
				</view>
				<view class="order-info">
					<view class="order-header">
						<view v-if="item.typeId === 1">维修方式: 搭电</view>
						<view v-if="item.typeId === 2">维修方式: 换胎</view>
						<view v-if="item.typeId === 3">维修方式: 拖车</view>
						<view v-if="item.typeId === 4">维修方式: 空运</view>
						
						<view class="order-status" v-if="item.status === 1">救援状态:已处理</view>
						<view class="order-status" v-if="item.status === 0">救援状态:未处理</view>
					</view>
					<view>预约时间: {{ item.applyTime }}</view>
				</view>
				<button class="detail-btn" @click="goDetail(item)">查看详情</button>
			</view>
			<view v-if="filteredList.length === 0" class="empty-tip">
				暂无符合条件的救援信息
			</view>
		</view>
	</view>
</template>

<script>
	import { get } from '../../utils/request.js'
	export default {
		data() {
			return {
				searchKeyword: "",
				orderList: [], 
				selectedType: "", // 直接通过v-model绑定，无需事件处理
				selectedStatus:''
			};
		},
		computed: {
			 filteredList() {
			    // 从原始列表开始过滤
			    let result = [...this.orderList];
			    // 应用救援方式过滤
			    if (this.selectedType) {
			      const targetType = Number(this.selectedType);
			      result = result.filter(item => Number(item.typeId) === targetType);
			    }
			    // 应用处理状态过滤
			    if (this.selectedStatus) {
			      const targetStatus = Number(this.selectedStatus);
			      result = result.filter(item => Number(item.status) === targetStatus);
			    }
			    // 应用搜索关键词过滤
			    if (this.searchKeyword) {
			      const keyword = this.searchKeyword.toLowerCase();
			      result = result.filter(item => 
			        item.orderNo.toLowerCase().includes(keyword) ||
			        item.position.toLowerCase().includes(keyword)
			      );
			    }
			    return result;
			  }
			},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/MaintenanceDetail/MaintenanceDetail?OrderData=${encodeURIComponent(JSON.stringify(item))}`
				});
			},
			search() {
				console.log("搜索关键词：", this.searchKeyword);
			}
		},
		async onLoad() {
			try {
				const merchant = uni.getStorageSync('merchant');
				if (!merchant?.id) {
					throw new Error("未获取到商户信息");
				}
				const res = await get(`/dev-api/system/rescue/list/mid/${merchant.id}`);
				this.orderList = Array.isArray(res) ? res : [];
			} catch (error) {
				console.error("获取数据失败：", error);
				this.orderList = [];
			}
		},
		watch: {
			// 监听selectedType变化，确认是否获取到值
			selectedType(newVal) {
				console.log("当前选中的救援方式：", newVal); 
				// 正常情况下，选择后会打印"1"、"2"等
			}
		}
	};
</script>

<style scoped>
	.select-box {
		width: 150rpx;
		padding: 8rpx 12rpx;
		border: 1px solid #eee;
		border-radius: 6px;
	}
		.order-manage {
			background-color: #f5f5f5;
			min-height: 100vh;
		}
	
		/* 顶部搜索及筛选 */
		.top-bar {
			padding: 10px;
			background-color: #2979ff;
			/* 移除固定高度，避免遮挡下拉框 */
		}
	
		.search-box {
			display: flex;
			align-items: center;
			background-color: #f5f5f5;
			border-radius: 8px;
			padding: 5px 10px;
		}
	
		.search-input {
			flex: 1;
			height: 30px;
			font-size: 14px;
		}
	
		.search-icon {
			width: 20px;
			height: 20px;
		}
	
		.filter-bar {
			display: flex;
			align-items: center;
			margin-top: 10px;
			color: #333;
			gap: 40rpx; /* 减小间距，适配不同屏幕 */
/* 			flex-wrap: wrap; /* 允许换行，避免溢出 */ 
		}
	
		.total-count {
			font-size: 14px;
			color: white;
		}
	
		.status-filter {
			display: flex;
			align-items: center;
			gap: 8px;
			font-size: 14px;
			color: white;
		}
	
		/* 下拉框样式优化 */
		.select-box {
			width: 150rpx;
			background-color: white;
			border: 1px solid #eee;
			border-radius: 6px;
			padding: 8rpx 12rpx;
			font-size: 14px;
		}
	
		.select-arrow {
			position: relative;
			left: -20rpx;
			color: #999;
			font-size: 12px;
		}
	
		/* 订单列表 */
		.order-list {
			margin-top: -15px;
			padding-left: 5%;
			padding-right: 5%;
			width: 90%;
		}
	
		.order-item {
			border: 1px solid #eee;
			border-radius: 8px;
			padding: 10px;
			margin-bottom: 10px;
			background-color: white;
		}
	
		.order-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 8px;
		}
	
		.order-id {
			font-size: 14px;
			color: #333;
		}
	
		.order-price {
			font-size: 14px;
			color: #f00;
		}
	
		.order-status {
			font-size: 14px;
			color: #007aff; /* 状态文字颜色区分 */
		}
	
		.order-info {
			font-size: 14px;
			color: #666;
			line-height: 1.6;
			margin-bottom: 8px;
		}
	
		.detail-btn {
			background-color: #007aff;
			color: #fff;
			font-size: 14px;
			padding: 5px 10px;
			border-radius: 4px;
			border: none;
			width: 100%;
		}
	
		/* 空状态样式 */
		.empty-tip {
			text-align: center;
			padding: 50rpx 0;
			color: #999;
			font-size: 14px;
		}
</style>